<template>
  <span class="i-layout-header-trigger i-layout-header-trigger-min">
    <Dropdown
      :trigger="isMobile ? 'click' : 'hover'"
      class="i-layout-header-user"
      :class="{ 'i-layout-header-user-mobile': isMobile }"
      @on-click="handleClick"
    >
      <Avatar size="small" :src="info.avatar" icon="ios-person" />
      <span class="i-layout-header-user-name" v-if="!isMobile">{{
        info.username
      }}</span>
      <DropdownMenu slot="list">
        <i-link to="/system/user/index">
          <DropdownItem>
            <Icon type="ios-contact-outline" />
            <span>个人中心</span>
          </DropdownItem>
        </i-link>

        <DropdownItem name="password">
          <Icon type="ios-contact-outline" />
          <span>修改密码</span>
        </DropdownItem>

        <DropdownItem divided name="logout">
          <Icon type="ios-log-out" />
          <span>我要退出</span>
        </DropdownItem>
      </DropdownMenu>
    </Dropdown>

    <Modal
      v-model="editVisible"
      title="修改密码吗?"
      width="30%"
      @on-ok="editPassword"
      @on-cancel="editClose"
    >
      <el-form ref="passForm" :model="passForm" label-width="80px">
        <el-form-item
          label="旧密码"
          prop="oldPasswod"
          :rules="[{ required: true, message: '旧密码不能为空' }]"
        >
          <el-input
            placeholder="请输入旧密码"
            autocomplete="off"
            v-model="passForm.oldPasswod"
          ></el-input>
        </el-form-item>

        <el-form-item
          label="新密码"
          prop="newPassword"
          :rules="[{ required: true, message: '新密码不能为空' }]"
        >
          <el-input
            type="password"
            placeholder="请输入修改密码"
            v-model="passForm.newPassword"
          ></el-input>
        </el-form-item>

        <el-form-item
          label="确认密码"
          prop="okPassword"
          :rules="[{ validator: validatePass, trigger: 'blur' }]"
        >
          <el-input
            type="password"
            placeholder="请输入确认密码"
            v-model="passForm.okPassword"
          ></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="editVisible = false">取 消</el-button>
        <el-button type="primary" @click="editPassword">确 定</el-button>
      </span>
    </Modal>
  </span>
</template>
<script>
import { mapState, mapActions } from 'vuex'
import { AccountPass } from '../../../api/system/account'

export default {
  name: 'iHeaderUser',
  data() {
    return {
      infor: {
        avatar: '',
        username: '',
      },
      editVisible: false,
      validatePass: null,
      passForm: {
        oldPasswod: '',
        newPassword: '',
        okPassword: '',
      },
    }
  },
  computed: {
    ...mapState('system/layout', ['isMobile', 'logoutConfirm']),
    ...mapState('system/user', ['info']),
  },
  created() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.passForm.newPassword) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    this.validatePass = validatePass
  },
  methods: {
    ...mapActions('system/account', ['logout']),
    /**
     * 关闭弹出框
     */
    editClose: function () {
      this.editVisible = false
    },
    editPassword: function () {
      this.$refs['passForm'].validate((valid) => {
        if (valid) {
          this.$utils.loading(this, '修改密码中..')
          AccountPass({
            oldPass: this.passForm.oldPasswod,
            newPass: this.passForm.okPassword,
          })
            .then((res) => {
              this.$utils.loadingClose()
              if (res.code == 200) {
                this.editVisible = false
                this.$message({
                  message: '恭喜你，密码修改成功,返回重新登录。',
                  type: 'success',
                  onClose: () => {
                    localStorage.clear()
                    this.$utils.util.cookies.remove('system_token')
                    this.$utils.util.cookies.remove('system_expires_time')
                    this.$utils.util.cookies.remove('system_uuid')
                    // 删除localStorage
                    this.$store.dispatch('pub/db/databaseClear', {
                      user: true,
                    })
                    this.$store.dispatch('system/user/set', {}, { root: true })
                    // 跳转路由
                    router.push({ name: 'system_login' })
                  },
                })
              } else {
                this.$alert(res.msg, '系统提示')
              }
            })
            .catch((err) => {
              this.$utils.loadingClose()
            })
        } else {
          return false
        }
      })
    },
    handleClick(name) {
      if (name === 'logout') {
        this.logout({
          confirm: this.logoutConfirm,
          vm: this,
        })
      }

      if (name == 'password') {
        this.editVisible = true
      }
    },
  },
}
</script>
